<template>
  <div>
    <Category :scene="scene" />
    <el-card style="margin-top: 10px">
      <div v-show="!scene">
        <el-button
          type="primary"
          icon="Plus"
          @click="addAttr"
          :disabled="!categoryStore.category3Id"
        >
          添加属性
        </el-button>
        <el-table
          :data="tableData"
          border
          style="margin-top: 10px"
          :height="tableHeight"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80px"
            align="center"
          ></el-table-column>
          <el-table-column label="属性名称" prop="attrName" width="150px">
          </el-table-column>
          <el-table-column label="属性值">
            <template #="{ row }">
              <el-tag
                v-for="(item, index) in row.attrValueList"
                :key="item.id"
                style="margin-right: 10px"
                :closable="row.attrValueList.length > 1"
                @close="deleteAttrValue(row, index)"
              >
                {{ item.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center">
            <template #="{ row }">
              <el-button
                type="primary"
                icon="Edit"
                size="small"
                @click="editAttr(row)"
              >
              </el-button>
              <el-popconfirm
                width="220"
                icon="Delete"
                :title="`是否删除${row.attrName}？`"
                @confirm="deleteAttr(row.id)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    icon="Delete"
                    size="small"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <scene1
        :scene="scene"
        :params="currentRow"
        @cancel="scene = 0"
        @save="saveSuccess"
      />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import Category from '@/components/Category/index.vue'
import {
  reqGetAttrList,
  reqDeleteAttr,
  reqAddOrUpdateAttr
} from '@/api/product/attr'
import type { Attr } from '@/api/product/attr/type'
import useCategoryStore from '@/store/modules/category'
import { ElMessage } from 'element-plus'
import scene1 from './scene1.vue'

const categoryStore = useCategoryStore()

const tableData = ref<Attr[]>([])
const tableHeight = window.innerHeight - 280 + 'px'
const getCategoryId = async () => {
  const { category1Id, category2Id, category3Id } = categoryStore
  const { code, data } = await reqGetAttrList(
    category1Id,
    category2Id,
    category3Id
  )
  if (code === 200) tableData.value = data
}

watch(
  () => categoryStore.category3Id,
  (newVal) => {
    tableData.value = []
    if (!newVal) return
    getCategoryId()
  }
)

let scene = ref<number>(0)
const currentRow = ref<Attr | undefined>()
const addAttr = () => {
  scene.value = 1
  currentRow.value = undefined
}
const saveSuccess = () => {
  scene.value = 0
  getCategoryId()
}
const editAttr = (row: any) => {
  scene.value = 1
  currentRow.value = row
}
const deleteAttr = async (id: string | number) => {
  const { code } = await reqDeleteAttr(id)
  if (code === 200) {
    ElMessage.success('删除成功')
    getCategoryId()
  } else {
    ElMessage.error('删除失败')
  }
}

const deleteAttrValue = async (row: Attr, index: number) => {
  const attr = JSON.parse(JSON.stringify(row))
  attr.attrValueList.splice(index, 1)
  const { code } = await reqAddOrUpdateAttr(attr)
  if (code === 200) {
    ElMessage.success('删除成功')
    getCategoryId()
  } else {
    ElMessage.error('删除失败')
  }
}

</script>
<script lang="ts">
export default {
  name: 'Attr'
}
</script>
